<template>
  <el-table :data="accountData" style="width: 100%">
<!--    <el-table-column type="expand">
      <template #default="props">
        <div m="4">
          <p m="t-0 b-2">用户邮箱: {{ props.row.email }}</p>
          <p m="t-0 b-2">用户生日: {{ props.row.birthday }}</p>
          <p m="t-0 b-2">用户性别: {{ props.row.sex }}</p>
          <p m="t-0 b-2">用户手机: {{ props.row.tel }}</p>
          <p m="t-0 b-2">会员到期时间: {{ props.row.vaild_time }}</p>
          <p m="t-0 b-2">最后充值时间: {{ props.row.last_edit_time }}</p>
          <p m="t-0 b-2">用户签名: {{ props.row.sign_text }}</p>
        </div>
      </template>
    </el-table-column>-->
    <el-table-column type="index" :index="indexMethod" label="序号" width="60%"/>
    <el-table-column label="用户名称" prop="name" />
    <el-table-column label="用户会员" prop="rank" />
    <el-table-column label="用户钱包" prop="money" />
    <el-table-column label="会员到期时间" prop="vaild_time" />
    <el-table-column label="最后充值时间" prop="last_edit_time" />
    <el-table-column label="用户状态" prop="status" />
    <el-table-column fixed="right" label="操作">
      <template #default="props">
        <el-button link type="primary" size="small" @click="openEditDialog(props.row.UID,props.row.name,props.row.money)">手动编辑</el-button>
        <el-button link type="primary" size="small" @click="openEditDialog_change(props.row.UID,props.row.name,props.row.money)">手动充值</el-button>
      </template>
    </el-table-column>

  </el-table>
  <el-dialog v-model="edit_items" title="编辑" width="800">
    <edit_card :UID="edit_UID" :name="edit_name" :money="edit_money" @close-dialog="closeEditDialog"></edit_card>
  </el-dialog>

  <el-dialog v-model="change_items" title="充值" width="800">
    <change_card :UID="change_UID" :name="change_name" :money="change_money" @close-dialog="closeEditDialog_change"></change_card>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import Edit_card from "@/items/rank_items/edit_card.vue";
import {md5} from "js-md5";
import {ElMessage} from "element-plus";
import Change_card from "@/items/rank_items/change_card.vue";
import router from "@/router";

interface account {
  UID: string,
  email: string,
  birthday: string,
  sex: string,
  name: string,
  status:string,
  tel: string,
  sign_text:string,
  last_login_time: string,
  last_logout_time: string,
  rank: string,
  vaild_time: string,
  last_edit_time: string,
  level:string,
  money:string,
  online_status:string,
}

const accountData = ref<account[]>([]);

const edit_items = ref(false);
const edit_UID = ref('');
const edit_name = ref('');
const edit_money = ref('');

const change_items = ref(false);
const change_UID = ref('');
const change_name = ref('');
const change_money = ref('');

const fetchaccountData = async () => {
  try {
    const formData = new FormData();
    formData.append('key', localStorage.getItem('key'));
    /*const response = await fetch('https://movie.cpb2013.top/admin/account.php?mode=show');*/
    const response = await fetch('https://movie.cpb2013.top/admin/account.php?mode=show', {
      method: 'POST',
      headers: {
        // 'Authorization': `Bearer ${token}`,
        'Accept': 'application/json',
      },
      body: formData,
    });
    const responseData = await response.json();
    if (responseData.status === 'success') {
      accountData.value = responseData.data.map((data: any) => ({
        UID: data.UID,
        email: data.email,
        birthday: data.birthday,
        sex: data.sex,
        name: data.name,
        status: data.status,
        tel: data.tel,
        sign_text: data.sign_text,
        last_login_time: data.last_login_time,
        last_logout_time: data.last_logout_time,
        rank: data.rank==0?"非会员":data.rank==1?"普通会员":data.rank==2?"超级会员":data.rank==3?"super会员":"非会员",
        vaild_time: data.vaild_time,
        last_edit_time: data.last_edit_time,
        level:data.level,
        money:data.money,
        online_status:data.online_status,
      }));
    }else if (responseData.status === 'danger') {
      ElMessage.error(responseData.msg);
      localStorage.removeItem('key');
      router.push('/login'); // Use router to navigate to the login page
    } else {
      console.error('Error fetching movie data:', responseData.message);
    }
  } catch (error) {
    console.error('Error fetching movie data:', error);
  }
}

const indexMethod = (index: number) => {
  return index+1
}

const openEditDialog = (UID,name,money) => {
  edit_UID.value = UID;
  edit_name.value=name;
  edit_money.value=money;
  edit_items.value = true;
}

const openEditDialog_change = (UID,name,money) => {
  change_UID.value = UID;
  change_name.value = name;
  change_money.value=money;
  change_items.value = true;
}

const closeEditDialog = () => {
  edit_items.value = false;
  fetchaccountData();
}

const closeEditDialog_change = () => {
  change_items.value = false;
  fetchaccountData();
}

const delAccount = async (UID,name) => {
  // let loading = openFullScreen();
  const formData = new FormData()

  formData.append('UID', UID); // 直接添加 form.type 的值
  formData.append('name', name); // 直接添加 form.type 的值
  formData.append('key', localStorage.getItem('key'));
  try {
    const response = await fetch("https://movie.cpb2013.top/admin/account.php?mode=remove", {
      method: 'POST',
      headers: {
        // 'Authorization': `Bearer ${token}`,
        'Accept': 'application/json',
      },
      body: formData,
    })

    if (response.ok) {
      const result = await response.json()
      if(result['status'] ==='success')
      {
        ElMessage.success('删除成功！')
        await fetchaccountData();
      }
      else if (result['status'] === 'danger') {
        localStorage.removeItem('key');
        ElMessage.error(result['msg']);
        await router.push('/login'); // Use router to navigate to the login page
      }
      else
      {
        ElMessage.error(result['msg'])
      }
    } else {
      ElMessage.error('删除失败！')
    }
  } catch (error) {
    ElMessage.error('请求失败！')
  }
  // closeFullScreen(loading)
}

onMounted(() => {
  fetchaccountData();
});
</script>
